<template>
  <div id="perfect-main">
    <model-title>
        完善档案信息
    </model-title>
    <el-row>
        <el-col :span="24">居民信息</el-col>
    </el-row>
    <div id="perfect-content">
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">居民编号：</div>
            </el-col>
            <el-col :span="6">
                <span class="span01">{{ obj.user_id }}</span>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">姓名：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.user_name"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">居民头像：</div>
            </el-col>
            <el-col :span="6">
                <span @click="addImgFn" class="addImg">+点击上传</span>
                <el-dialog title="选择头像" :visible.sync="dialogTableVisible" width="400px">
                    <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :before-remove="beforeRemove"
                            list-type="picture">
                            <el-button size="small" v-model="obj.user_img"  type="primary">点击上传</el-button>
                    </el-upload>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogTableVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">身份证号：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.user_cardId"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">手机号：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.user_phone"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">居民标签：</div>
            </el-col>
            <el-col :span="6">
                 <el-select placeholder="请选择" :style={width:wid} v-model="obj.lable_id">
                    <el-option v-for="(item, index) in lableList" :key="index" :label="item.lable_name" :value="item.lable_id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">现居地：</div>
            </el-col>
            <el-col :span="14">
                <el-input :style={width:wid2} v-model="obj.user_area"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">行政区划：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.xzqh">
                    <el-option v-for="obj in list6" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">户籍地址：</div>
            </el-col>
            <el-col :span="14">
                <el-input :style={width:wid2} v-model="obj.user_census"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">家庭成员:</div>
            </el-col>
            <el-col :span="6">
                <span @click="dialogTableVisible2 = true" class="addImg" v-if="fmName==''">+点击选择</span>
                <span @click="dialogTableVisible2 = true" class="addImg" v-if="fmName != '' "> {{ fmName2 }} </span>
                <el-dialog title="选择家庭成员" :visible.sync="dialogTableVisible2" width="400px">
                    <el-row>
                        <el-col :span="5">
                            <div class="inputTitle">选择成员：</div>
                        </el-col>
                        <el-col :span="19">
                            <el-select placeholder="请选择" :style={width:wid} v-model="user_fm" @change="fms(user_fm)">
                                <el-option v-for="obj in list8" :key="obj.user_id" :label="obj.user_name" :value="obj.user_id"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <br>
                    <el-row>
                        <el-col :span="5">
                            <div class="inputTitle">关系：</div>
                        </el-col>
                        <el-col :span="19">
                            <el-select placeholder="请选择" :style={width:wid} v-model="user_gx">
                                 <el-option v-for="obj in list9" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="fmsFn">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
      </div>
      <el-divider class="line"></el-divider>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">性别：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_sex">
                    <el-option v-for="(obj,index) in sexList" :key="index" :value="obj.id" :label="obj.sex"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">出生年月：</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker type="date" :style={width:wid} v-model="obj.user_bir"></el-date-picker>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">籍贯：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_native">
                    <el-option v-for="obj in list2" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">民族：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_nation">
                    <el-option v-for="obj in list3" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">文化程度：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_culture">
                    <el-option v-for="obj in list4" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">婚姻状况：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_marriage">
                    <el-option v-for="obj in list5" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">职业：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.workName"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">工作单位：</div>
            </el-col>
            <el-col :span="14">
                <el-input :style={width:wid2} v-model="obj.workArea"></el-input>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">紧急联系：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.jjlxr"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">联系电话：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.jjlxrPhone"></el-input>
            </el-col>
        </el-row>
      </div>
      <el-divider class="line"></el-divider>
      <div class="add-people-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">户籍类型：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.hjlx">
                    <el-option v-for="obj in list7" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">定点医疗：</div>
            </el-col>
            <el-col :span="14">
                <el-input :style={width:wid2} v-model="obj.ddyl"></el-input>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">费用类型：</div>
            </el-col>
            <el-col :span="22">
              <div class="perfectCheck">
                <el-radio v-model="obj.fylx" label="1">自费</el-radio>
                <el-radio v-model="obj.fylx" label="2">社会医疗保险</el-radio>
                <el-radio v-model="obj.fylx" label="3">商业保险</el-radio>
                <el-radio v-model="obj.fylx" label="4">新农合</el-radio>
                <el-radio v-model="obj.fylx" label="5">其他</el-radio>
              </div>
            </el-col>
        </el-row>
      </div>
      <el-divider class="line"></el-divider>
      <el-row>
        <el-col :span="24">健康信息</el-col>
      </el-row>
      <div class="add-people-line" style="margin-top:10px">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle" >身高：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.sg"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">体重：</div>
            </el-col>
            <el-col :span="6">
                <el-input :style={width:wid} v-model="obj.tz"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">血型：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_xx">
                    <el-option v-for="obj in list10" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">RH阴性：</div>
            </el-col>
            <el-col :span="22">
                <el-select placeholder="请选择" :style={width:wid} v-model="obj.user_rhxx">
                    <el-option v-for="obj in list11" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">过敏史：</div>
            </el-col>
            <el-col :span="6">
                <div style="margin-top:10px">
                  <el-radio v-model="obj.gms" label="1" @change="rodioFn01">无</el-radio>
                  <el-radio v-model="obj.gms" label="2" @change="rodioFn01">有</el-radio>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="height:35px">
                    <el-input :style={width:wid2} v-model="obj.gmstext" v-show="show01"></el-input>
                </div>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">既往史：</div>
            </el-col>
            <el-col :span="6">
                <div style="margin-top:10px">
                  <el-radio v-model="obj.jws" label="1" @change="rodioFn02">无</el-radio>
                  <el-radio v-model="obj.jws" label="2" @change="rodioFn02">有</el-radio>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="height:35px">
                    <el-input :style={width:wid2} v-model="obj.jwstext" v-show="show02"></el-input>
                </div>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">就诊史：</div>
            </el-col>
            <el-col :span="6">
                <div style="margin-top:10px">
                  <el-radio v-model="obj.jzs" label="1" @change="rodioFn03">无</el-radio>
                  <el-radio v-model="obj.jzs" label="2" @change="rodioFn03">有</el-radio>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="height:35px">
                    <el-input :style={width:wid2} v-model="obj.jzstext" v-show="show03"></el-input>
                </div>
            </el-col>
        </el-row>
      </div>
      <div class="add-people-line">
      <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">家族病史：</div>
            </el-col>
            <el-col :span="6">
                <div style="margin-top:10px">
                  <el-radio v-model="obj.jzbs" label="1" @change="rodioFn04">无</el-radio>
                  <el-radio v-model="obj.jzbs" label="2" @change="rodioFn04">有</el-radio>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="height:35px">
                    <el-input :style={width:wid2} v-model="obj.jzbstext" v-show="show04"></el-input>
                </div>
            </el-col>
        </el-row>
      </div>
      <el-divider class="line"></el-divider>
      <div id="perfect-bottom">
        <el-button type="primary" @click="updateById">保存</el-button>
        <el-button @click="pageBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { postRequest } from '@/utils/api'
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '@/components/ModelTitle.vue'
import ImportImg from '@/components/People/importImg.vue'
import moment from 'moment'
export default {
  components: { ModelTitle, ImportImg },
  created(){
    this.lableLoad()
    this.fmLoad()
    if(this.$route.query.id == null){
        this.obj=this.$route.query.list
    }else{
        this.updateLoad()
    }
  },
  data() {
    return {
      wid:"200px",
      wid2:"578px",
      user_fm: "",
      user_gx: "",
      obj:{},
      obj2:{},
      lableList:[],
      sexList:[{id:1,sex:'男'},{id:2,sex:'女'}],
      list2:[{id:1,name:"中国"}],
      list3:[{id:1,name:"汉族"},{id:2,name:"回族"},{id:3,name:"其他"}],
      list4:[{id:1,name:"小学"},{id:2,name:"初中"},{id:3,name:"高中"},{id:4,name:"大专"},{id:5,name:"本科"},{id:6,name:"研究生"}],
      list5:[{id:1,name:"已婚"},{id:2,name:"未婚"}],
      list6:[{id:1,name:"省级行政区"},{id:2,name:"地级行政区"},{id:3,name:"县级行政区行政区"},{id:4,name:"乡级行政区"}],
      list7:[{id:1,name:"城市"},{id:2,name:"农村"}],
      list8:[],
      list9:[{id:1,name:"父母"},{id:2,name:"兄弟"},{id:3,name:"姐妹"}],
      list10:[{id:1,name:"A型"},{id:2,name:"B型"},{id:3,name:"O型"},{id:4,name:"AB血型"},{id:5,name:"不详"}],
      list11:[{id:1,name:"是"},{id:2,name:"否"},{id:3,name:"不详"}],
      show01: false,
      show02: false,
      show03: false,
      show04: false,
      dialogTableVisible:false,
      dialogTableVisible2:false,
      fmName:"",
      fmName2:""
    } 
  },
  methods:{
    updateLoad(){
        axios({
            url:"/sign/getSignById",
            method:"get",
            params:{
                id:this.$route.query.id
            }
        }).then(res => {
            // console.log(res);
            this.obj = res.data
            this.rodios()
        })
    },
    handlePreview(file) {
        this.obj.user_img="http://localhost:8080/"+file.name
    },
    lableLoad(){
        axios({
            url:"/sign/getLableList",
            method:"get"
        }).then(res => {
            this.lableList = res.data
        })
    },
    fmLoad(){
        axios({
            url:"/sign/getFmList",
            method:"get",
            params:{
                id:this.$route.query.id
            }
        }).then(res => {
            this.list8 = res.data
        })
    },
    updateById(){
        this.obj.user_bir = moment(this.obj.user_bir).format("YYYY-MM-DD")
        this.obj.end_time = moment(new Date()).format("YYYY-MM-DD")
        postRequest("sign/updatePeopleById",this.obj).then(resp=>{
            this.$message.success("操作成功！！！")
            this.$router.push('/people')
        })
    },
    pageBack(){
        this.$router.back()
    },
    rodioFn01(){
        this.rodios()
    },
    rodioFn02(){
        this.rodios()
    },
    rodioFn03(){
        this.rodios()
    },
    rodioFn04(){
        this.rodios()
    },
    rodios(){
        if(this.obj.gms != 2){
            this.show01 = false
            this.obj.gmstext = ""
        }else{
            this.show01 = true
        }
        if(this.obj.jws!= 2){
            this.show02 = false
            this.obj.jwstext = ""
        }else{
            this.show02 = true
        }
        if(this.obj.jzs!= 2){
            this.show03 = false
            this.obj.jzstext = ""
        }else{
            this.show03 = true
        }
        if(this.obj.jzbs!= 2){
            this.show04 = false
            this.obj.jzbstext = ""
        }else{
            this.show04 = true
        }
    },
    addImgFn(){
        this.dialogTableVisible = true
    },
    fms(id){
        axios({
            url:"/sign/getSignById",
            method:"get",
            params:{
                id:id
            }
        }).then(res =>{
            this.fmName = res.data.user_name
        })
    },
    fmsFn(){
        this.dialogTableVisible2 = false
        this.fmName2 = this.fmName
    }
  }
}
</script>

<style>
    #perfect-main{
        width: 1150px;
        background: white;
        box-sizing: border-box;
        padding: 10px 20px;
        margin: 20px auto;
    }
    #perfect-content{
      margin-top: 20px;
    }
    .perfectCheck{
      margin-top: 12px;
    }
    #perfect-bottom{
      width: 100%;
      height: 50px;
    }
    .inputTitle{
        width: 100%;
        height: 38px;
        display: flex;
        font-size: 13px;
        color: darkgray;
        align-items: center;
        justify-content: flex-end;
    }
    .add-people-line{
        margin-bottom: 20px;
    }
    .span01{
        display: inline-block;
        margin-top: 10px;
        color: darkgray;
        font-size: 13px;
    }
    .addImg{
        display: inline-block;
        color: blue;
        font-size: 14px;
        margin-top: 12px;
        cursor: pointer;
    }
</style>